<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>声明变量</title>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <script>
            //页面加载完成
            window.onload = function () {
                var a=1;
                var b='b';
                var c = true;
                var d= null;
                var e = function(){};
                var f = undefined;
                //btn的点击事件
                document.getElementById('btn').onclick = function () {
                    alert(a);
                };
                document.getElementById('btn1').onclick = function () {
                    alert(typeof(a));
                };
                document.getElementById('btn2').onclick = function () {
                    alert(typeof(b));
                };
                document.getElementById('btn3').onclick = function () {
                    alert(typeof(c));
                };

                document.getElementById('btn4').onclick = function () {
                    alert(typeof(d));
                };
                document.getElementById('btn5').onclick = function () {
                    alert(typeof(e));
                };
                document.getElementById('btn6').onclick = function () {
                    alert(typeof(f));
                };

            };
        </script>
    </head>
    <body>
        <div class="title">声明变量</div>
        <div style='margin-left: 10px;'> <span>var a;</span><br/>
            <span>var</span> 关健字（表示声明）<br/>
           <span> a  </span> 变量名称（变量命名规则，不能是数字，运算符开头）
        </div>
        <div class="title">代码示例</div>
        <div class="code">
                    <pre>
                        <span>var a=1;</span>
                       alert（a）;
                    </pre>
        </div>
        <div class="title">代码结果</div>
        <div class="code">
            <button id="btn">点击查看效果</button>
        </div>
        <div class="title">
            数据类型
        </div>
        <div class="code">
        <pre>
            <span>Number</span>　　　　　　数字
            <span>String</span>　　　　　　字符串（要用引号）
           <span>Undefined</span>　　　　(未定义的类型)
           <span>Boolean</span>　　　布尔类型 true|false
           <span>Object</span>　　　对象类型（包括null）
           <span>Function</span>　　　　方法类型
        </pre>
        </div>
        <div class="title">
            代码示例
        </div>
        <div class="code">
            <pre>
                var a=1;   数字
                var b='b';
                var c = true;
                var d= null;
                var e = function(){};
                var f = undefined;
            </pre>
        </div>
        <div class="title">
            结果
        </div>
        <div class="code">
            <button id="btn1">number</button>
            <button id="btn2">string</button>
            <button id="btn3">Boolean</button>
            <button id="btn4">Object</button>
            <button id="btn5">Function</button>
            <button id="btn6">Undefined</button>
        </div>

    </body>
</html>